<template>
	<scroll-view class="search" scroll-y>
	  <view class="searchInput">
		<u-search :clearabled="true" height="60" :focus="true" @search="handleInput" @custom="handleInput"	></u-search>
	  </view>
	  <view class="history" v-if="historyList.length>0">
	    <view class="his">
	      <view class="txt">搜索历史</view>
		  <u-icon name="trash" color="#aaa" size="40"  @click="handleC"></u-icon>
	    </view>
	    <view class="hreg" v-for="item in historyList" @click="setvalue" :data-value="item" :key="item">
	      <view>{{item}}</view>
	    </view>
	  </view>
	  <view class="LData">
			<Product :product="item"  v-for="(item,index) in List" :key="index"></Product>
	
	  </view>
	</scroll-view> 
</template>

<script>
	import Product from "@/components/Product/Product.vue"
	export default {
		components:{
			Product
		},
		data() {
			return {
				List:[],
				value:'',
				historyList:[]
			}
		},
		mounted() {
			this.historyList=uni.getStorageSync('historyList')||[]
		},
		methods: {
		clear(){
			this.List=[]
			this.hidden=true
			this.value=""
		  },
		  handleC(){
			  let that  =this
			  uni.showModal({
			  	title:"提示",
				content:"是否确认删除历史记录？",
				success() {
					that.historyList=[]
					uni.setStorageSync('historyList', [])
				}
			  })
			
		  },
		  handleInput(value){
			if(!value.trim()){
				this.value = "";
				this.List=[]
			  return
			}
			 this.setList(value)
		  },
		setvalue(e){
		  let value =e.currentTarget.dataset.value
		  this.value = value
		  this.setList(value)
		},
		setList(value){
		  let List = []
		  let historyList = uni.getStorageSync('historyList')||[]
		  let index = historyList.findIndex(v=>{return v===value})
		  if(index<0){
			historyList.unshift(value)
		  }
		  uni.setStorageSync('historyList', historyList)
		  this.$http.getproductByName({name:value}).then(res=>{
			  console.log(res);
		   if(res.products.length===0){
				uni.showToast({
				  title: '很抱歉，未搜索到该商品',
				  icon:"none"
				})
				return 
		   }
			  this.List = res.products;
			  this.historyList = historyList;
			  this.value = "";
		  })
		},
		}
	}
</script>

<style scoped>
.search {
  height: calc(100vh - 50px);
  background-color: #fdfdfd;
  box-sizing: border-box;
}
.search .searchInput {
  display: flex;
  padding: 20rpx;
  background-color: #fff;
}
.search .history .his {
  padding: 20rpx;
  display: flex;
  justify-content: space-between;
  font-size: 28rpx;
}
.search .history .hreg {
  display: block;
}
.search .history .hreg view {
  float: left;
  padding: 5rpx 15rpx;
  background-color: #fff;
  border-radius: 15rpx;
  border: 3rpx solid var(--themeColor);
  margin-left: 10rpx;
  overflow: hidden;
  margin-bottom: 15rpx;
}
.search .LData {
  clear: both;
  padding:0  2%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
</style>
